@import url(https://fonts.googleapis.com/css?family=Open+Sans, );
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
	list-style: none;
	text-decoration: none;
	scroll-behavior: smooth;
}
:root {
	--bg-color: #ffffff;
	--text-color: #22100d;
	--second-color: #685f78;
	--main-color: #f66962;
	--big-font: 3.8rem;
	--h2-font: 2.6rem;
	--p-font: 1.1rem;
	--more-main-color: #dcdcdc;
}

body {
	background-color: #dcdcdc;
	/* Choose a muted or desaturated color */
	
	font-family: 'Poppins', sans-serif;


}

/*navbar*/
#menu {
	
	background: linear-gradient(to bottom,  #002A38,  #000003);
	height: 75px;
	border-radius: 0px;
}
#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
	text-align: center;
}
#menu li {
	display: inline-block;
	position: relative;
}
#menu a {
	display: block;
	line-height: 66px;
	padding: 0 14px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 22px;
	text-transform: uppercase;
		
	font-family: 'Poppins', sans-serif;
}
 li a:hover {
	color: #FFFFFF;
	background: #000000;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 66px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 66px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 1.6em;
	color: #FFFFFF;
	content: "\2261"; 
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 170px;
	background: #4A4A4A;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	text-align: left;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #FFFFFF;
	font-size: 16px;
	text-transform: capitalize;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #BDBDBD;
	color: #444444;
}
@media screen and (max-width: 800px){
	#menu {position:relative}
	#menu ul {background: linear-gradient(to bottom,  #002A38,  #000003);position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;text-align:left;}
	#menu ul.sub-menus {width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:30px;}
	#menu li {display:block;float:none;width:auto;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block}
	#menu input {z-index:4}
	#menu input:checked + label {color:#FFFFFF}
	#menu input:checked + label:before {content:"\00d7"}
	#menu input:checked ~ ul {display:block}
}

/*navbar end*/


/*SEARCH BAR*/
/*footer*/
.container{
	max-width: 1170px;
	margin:auto;
}
.row-footer{
	display: flex;
	flex-wrap: wrap;
}
ul{
	list-style: none;
	padding: 0.2px;
}
.footer{
	background-color: #24262b;
    padding: 70px 0;
}
.footer-col{
   width: 33%;
   padding: 0 15px;
}
.footer-col h4{
	font-size: 18px;
	color: #ffffff;
	text-transform: capitalize;
	margin-bottom: 35px;
	font-weight: 500;
	position: relative;
}
.footer-col h4::before{
	content: '';
	position: absolute;
	left:0;
	bottom: -10px;
	background-color: #e91e63;
	height: 2px;
	box-sizing: border-box;
	width: 50px;
}
.footer-col ul li:not(:last-child){
	margin-bottom: 10px;
}
.footer-col ul li a{
	font-size: 16px;
	text-transform: capitalize;
	color: #ffffff;
	text-decoration: none;
	font-weight: 300;
	color: #bbbbbb;
	display: block;
	transition: all 0.3s ease;
}
.footer-col ul li a:hover{
	color: #ffffff;
	padding-left: 0px;
	background-color: #24262b;
}
.footer-col .social-links a{
	display: inline-block;
	height: 40px;
	width: 40px;
	background-color: rgba(255,255,255,0.2);
	margin:0 10px 10px 0;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	color: #ffffff;
	transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
	color: #24262b;
	background-color: #ffffff;
}

/*responsive*/
@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}
@media(max-width: 574px){
  .footer-col{
    width: 100%;
}
}


/* Copy Right Footer */
.footer-copyright {	background: #222;	padding: 5px 0;}
.footer-copyright .logo {    display: inherit;}
.footer-copyright nav {    float: right;    margin-top: 5px;}
.footer-copyright nav ul {	list-style: none;	margin: 0;	padding: 0;}
.footer-copyright nav ul li {	border-left: 1px solid #505050;	display: inline-block;	line-height: 12px;	margin: 0;	padding: 0 8px;}
.footer-copyright nav ul li a{	color: #969696;}
.footer-copyright nav ul li:first-child {	border: medium none;	padding-left: 0;}
.footer-copyright p {	color: #969696;	margin: 2px 0 0;}


/*FOOTER END*/


/*about us*/
.website-intro {
	width: 100%;
	background: #11181f;
	position: absolute;
	top: 74px;
	height: 140px;
	align-items: center;
	justify-content: center;
	display: flex;
}

.title {
	color: white;
	font-weight: bold;
	position: absolute;
	top: 48px;
	left: 750px;
}

.about-website {
	color: white;
	font-weight: bold;
	align-self: normal;
	margin: 20px;
	position: absolute;
	top: 90px;
	right: 379px;
}

/*about end*/
/*main links*/


.courses {

	

	background-size: contain;

	background-position: center;


}




.courses-content {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(273px, auto));
    gap: 7rem;
    align-items: center;
    margin-top: 2rem;
    cursor: pointer;
    border-radius: 100px;

}

.row {

	background: white;

	padding: 0px 0px 10px 0px;

	border-radius: 54px;

	box-shadow: 0px 5px 40px rgb(19 8 73 / 13%);

	transition: all .40s ease;


}

.row:hover {

	transform: translateY(-15px);

}

.ro
 img {

	width: 100%;

	height: 320px;

	border-radius: 0px 63px 0px 0px;
	
	padding-top: 20%;

	background-size: contain;
	
}

.pic-1 {
	width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: -1px;
    padding-bottom: -13px;
    padding-left: 47px;
    padding-right: 36px;
    background-size: contain;

}



.pic-2 {
	width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 67px;
    padding-bottom: 9px;
    padding-left: 36px;
    padding-right: 36px;
    background-size: contain;
}




.pic-3 {
	width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 91px;
    padding-bottom: 9px;
    padding-left: 34px;
    padding-right: 36px;
    background-size: contain;
}





.pic-4 {
	width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 52px;
    padding-bottom: -2px;
    padding-left: 2px;
    padding-right: 2px;
    background-size: contain;
}





.pic-5 {
	width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 49px;
    padding-bottom: 9px;
    padding-left: 65px;
    padding-right: 70px;
    background-size: contain;
}



.pic-6 {
    width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 27px;
    padding-bottom: 9px;
    padding-left: 62px;
    padding-right: 67px;
    background-size: contain;
}




.pic-7 {
	width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 63px;
    padding-bottom: 9px;
    padding-left: 65px;
    padding-right: 58px;
    background-size: contain;
}




.pic-8 {
    width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 149px;
    padding-bottom: 25px;
    padding-left: 47px;
    padding-right: 53px;
    background-size: contain;
}




.pic-9 {
    width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 22px;
    padding-bottom: 0px;
    padding-left: 68px;
    padding-right: 87px;
    background-size: contain;
}



.pic-1-p2 {
    width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 22px;
    padding-bottom: 0px;
    padding-left: 68px;
    padding-right: 87px;
    background-size: contain;
}




.pic-2-p2 {
    width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 22px;
    padding-bottom: 0px;
    padding-left: 68px;
    padding-right: 87px;
    background-size: contain;
}




.pic-3-p2 {
	width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 71px;
    padding-bottom: 0px;
    padding-left: 62px;
    padding-right: 87px;
    background-size: contain;
}




.pic-4-p2 {
    width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 22px;
    padding-bottom: 0px;
    padding-left: 68px;
    padding-right: 87px;
    background-size: contain;
}




.pic-5-p2 {
    width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 22px;
    padding-bottom: 0px;
    padding-left: 68px;
    padding-right: 87px;
    background-size: contain;
}




.pic-6-p2 {
    width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 22px;
    padding-bottom: 0px;
    padding-left: 68px;
    padding-right: 87px;
    background-size: contain;
}




.pic-7-p2 {
	width: 100%;
    height: 294px;
    border-radius: 67px 63px 0px 0px;
    padding-top: 52px;
    padding-bottom: 0px;
    padding-left: 81px;
    padding-right: 108px;
    background-size: contain;
}



.courses-text {

	padding: 35px 20px;

}

.courses-text h5 {

	color: black;

	font-size: 18px;

	font-weight: 700;

}

.courses-text h3 {

	font-size: 24px;

	font-weight: 700;

	line-height: 34px;

	margin: 15px 0 15px;

	transition: all .40s ease;
	color: black;

	text-decoration: underline;

}

.courses-text h3:hover {

	color:#e91e63 ;
transform: scale(1.050);
	  transition: all 0.45s ease; 
}


.courses-text h6 {

	color: black;

	font-size: var(--p-font);

	font-weight: 400; 

	line-height: 30px;

	letter-spacing: 1px;

	margin-bottom: 30px;

	text-decoration: underline;

}

.all-sections {
	padding: 329px 13%;
	margin-bottom: -403px;
}

.all-sections-2 {
	padding: 329px 13%;
	margin-bottom: -146px;
}

.courses-text h6:hover{
      color: #e91163;
	  transition: all 0.45s ease; 
	  
}


/*main links end*/


.product-1-h2{
	position: absolute;
    top: 234px;
    left: 687px;
    text-transform: capitalize;
    font-family: 'Montserrat', "Merriweather", sans-serif;
    font-size: 500%;
	text-decoration: underline;
}


.product-2-h2{
	position: absolute;
    top: 2278px;
    left: 487px;
    text-transform: capitalize;
	font-family: 'Montserrat', "Merriweather", sans-serif;
    font-size: 500%;
	text-decoration: underline;
}

/*about section*/

/*about section end*/
/*reviews*/

/*reviews end*/



@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Koulen&family=Lato&family=Nunito&family=Playfair+Display:ital@1&family=Prata&family=Raleway:ital,wght@1,100&family=Roboto&family=Roboto+Condensed&family=Teko&display=swap');

.btn{

font-family: Lato;
font-weight: 100;
font-size: 23px;
color: #ffffff;
background: linear-gradient(168deg, #0066CC 0%, #c500cc 100%);
padding: 10px 66px;
border: none;
box-shadow: none;
border-radius: 19px;
transition : 1142ms;
transform: translateY(0);
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
text-transform: uppercase;
position: absolute;
top: 200px;
left: 345px;
}

.btn:hover{

transition : 1142ms;
padding: 10px 100px;
transform : translateY(-0px);
background: linear-gradient(168deg, #0066CC 0%, #c500cc 100%);
color: #ffffff;
border: none;
}

.btn-2{

font-family: Lato;
font-weight: 100;
font-size: 23px;
color: #ffffff;
background: black;
padding: 10px 66px;
border: none;
box-shadow: none;
border-radius: 19px;
transition : 1142ms;
transform: translateY(0);
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
text-transform: uppercase;
position: absolute;
top: 200px;
left:840px;
}

.btn-2:hover{

transition : 1142ms;
padding: 10px 100px;
transform : translateY(-0px);
background: black;
color: #ffffff;
border: none;
}



.btn-3{

font-family: Lato;
font-weight: 100;
font-size: 23px;
color: #ffffff;
background: linear-gradient(to bottom,  #002A38,  #000003);
padding: 10px 66px;
border: none;
box-shadow: none;
border-radius: 19px;
transition : 1142ms;
transform: translateY(0);
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
text-transform: uppercase;
position: absolute;
top: 200px;
left: 1373px;
}

.btn-3:hover{

transition : 1142ms;
padding: 10px 100px;
transform : translateY(-0px);
background: linear-gradient(to bottom,  #002A38,  #000003);
color: #ffffff;
border: none;
}



/*new navbar end */
.category-content {
	display: none;
  }


  
  @media (max-width:915px) {
	.about-us-bg {
		background-color: #fff;
		border-radius: 0px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		width: 82%;
		height: 303px;
		box-sizing: border-box;
		align-items: center;
		align-self: center;
		text-align: left;
		margin-top: -14px;
		margin-bottom: 61px;
		position: absolute;
		margin-left: 0;
		padding-top: 15px;
	}
  }

  @media (max-width:915px) {
	.product-1-h2 {
		position: absolute;
		top: 145px;
		left: 24px;
		text-transform: capitalize;
		font-family: "Libre Baskerville", serif;
		font-size: 322%;
	}
  }

  @media (max-width:915px) {
	.courses-content {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(273px, auto));
		gap: 5rem;
		align-items: center;
		margin-top: -9rem;
		cursor: pointer;
		border-radius: 100px;
	}
  }

  @media (max-width:915px) {
	.pic-1 {
		width: 100%;
		height: 219px;
		border-radius: 67px 63px 0px 0px;
		padding-top: -1px;
		padding-bottom: -13px;
		padding-left: 47px;
		padding-right: 36px;
		background-size: contain;
	}
  }

  @media (max-width:915px) {
	.pic-2 {
		width: 100%;
		height: 219px;
		border-radius: 67px 63px 0px 0px;
		padding-top: -1px;
		padding-bottom: -13px;
		padding-left: 47px;
		padding-right: 36px;
		background-size: contain;
	}
  }

  @media (max-width:915px) {
	.pic-3 {
		width: 100%;
		height: 219px;
		border-radius: 67px 63px 0px 0px;
		padding-top: -1px;
		padding-bottom: -13px;
		padding-left: 47px;
		padding-right: 36px;
		background-size: contain;
	}
  }

  @media (max-width:915px) {
	.pic-4 {
		width: 100%;
		height: 219px;
		border-radius: 67px 63px 0px 0px;
		padding-top: -1px;
		padding-bottom: -13px;
		padding-left: 47px;
		padding-right: 36px;
		background-size: contain;
	}
  }

  @media (max-width:915px) {
	.pic-5 {
		width: 100%;
    height: 221px;
    border-radius: 67px 63px 0px 0px;
    padding-top: -1px;
    padding-bottom: -13px;
    padding-left: 60px;
    padding-right: 64px;
    background-size: contain;
	}
  }

  @media (max-width:915px) {
	.pic-6 {
		width: 100%;
		height: 219px;
		border-radius: 67px 63px 0px 0px;
		padding-top: -1px;
		padding-bottom: -13px;
		padding-left: 58px;
		padding-right: 59px;
		background-size: contain;
	}
  }

  @media (max-width:915px) {
	.pic-7 {
		width: 100%;
		height: 245px;
		border-radius: 67px 63px 0px 0px;
		padding-top: -1px;
		padding-bottom: -13px;
		padding-left: 47px;
		padding-right: 36px;
		background-size: contain;
	}
  }

  @media (max-width:915px) {
	.pic-8 {
		width: 100%;
		height: 219px;
		border-radius: 67px 63px 0px 0px;
		padding-top: 114px;
		padding-bottom: 25px;
		padding-left: 47px;
		padding-right: 36px;
	}
  }

  @media (max-width:915px) {
	.pic-9 {
		width: 100%;
		height: 259px;
		border-radius: 67px 63px 0px 0px;
		padding-top: 5px;
		padding-bottom: -11px;
		padding-left: 67px;
    padding-right: 77px;
		background-size: contain;
	}
  }

  @media (max-width:915px) {
	.product-2-h2 {
		position: absolute;
		top: 4879px;
		left: 23px;
		text-transform: capitalize;
		font-family: "Libre Baskerville", serif;
		font-size: 196%;
	}
  }

  @media (max-width:915px) {
	.pic-2-p2 {
		width: 100%;
		height: 294px;
		border-radius: 67px 63px 0px 0px;
		padding-top: 42px;
		padding-bottom: 17px;
		padding-left: 68px;
		padding-right: 87px;
		background-size: contain;
	}
  }

  @media (max-width:915px) {
	.pic-3-p2 {
		width: 100%;
		height: 294px;
		border-radius: 67px 63px 0px 0px;
		padding-top: 86px;
		padding-bottom: 39px;
		padding-left: 60px;
		padding-right: 87px;
		background-size: contain;
	}
  }

  @media (max-width:915px) {
	.pic-4-p2 {
		width: 100%;
		height: 294px;
		border-radius: 67px 63px 0px 0px;
		padding-top: 74px;
		padding-bottom: 36px;
		padding-left: 68px;
		padding-right: 87px;
		background-size: contain;
	}
  }

  @media (max-width:915px) {
	.pic-5-p2 {
		width: 100%;
		height: 294px;
		border-radius: 67px 63px 0px 0px;
		padding-top: 64px;
		padding-bottom: 31px;
		padding-left: 68px;
		padding-right: 87px;
		background-size: contain;
	}
	
	
  }
  

  @media (max-width:915px) {
	.pic-6-p2 {
		width: 100%;
		height: 294px;
		border-radius: 67px 63px 0px 0px;
		padding-top: 49px;
		padding-bottom: 18px;
		padding-left: 60px;
		padding-right: 74px;
		background-size: contain;
	}
	
  }

  @media (max-width:915px) {
	.pic-7-p2 {
		width: 100%;
		height: 294px;
		border-radius: 67px 63px 0px 0px;
		padding-top: 92px;
		padding-bottom: 13px;
		padding-left: 82px;
		padding-right: 87px;
		background-size: contain;
	}
	
  }

  @media (max-width:915px) {
	.all-sections-2 {
		padding: 329px 13%;
		margin-bottom: -298px;
	}
	
  }